<!--
 * @Description  :
 * @Autor        : guoxi
 * @Date         : 2022-06-16 10:16:50
 * @LastEditors  : Please set LastEditors
 * @LastEditTime : 2022-09-08 09:54:52
 * @FilePath     : \rpms\src\views\project\implementation\detail\index.vue
-->
<template>
  <div>
    <!-- <el-card> -->
      <div>
        <el-table
          :data="tableData"
          border
          :header-cell-style="{
            background: '#eef1f6',
            color: '#606266'
          }"
        >
          <template #empty>
            <el-empty :image-size="40" description="暂无数据"></el-empty>
          </template>
          <el-table-column type="index" label="序号" />
          <el-table-column prop="time" label="起止时间"></el-table-column>
          <el-table-column prop="content" label="研究内容"></el-table-column>
          <el-table-column prop="goal" label="预期目标"></el-table-column>
          <el-table-column prop="isDone" label="是否完成">
            <template #default="{ row }">
              {{ row.isDone === "1" ? "是" : "否" }}
            </template>
          </el-table-column>
          <el-table-column prop="doneTime" label="完成时间"></el-table-column>
          <el-table-column prop="doneDes" label="完成情况"></el-table-column>
          <el-table-column label="进度">
            <template #default="{ row }">
              {{ row.progress && row.progress + "%" }}
            </template>
          </el-table-column>
          <el-table-column>
            <template #default="{ row, $index }">
              <el-button type="text" @click="openProcess(row, $index)"
                >实施过程记录</el-button
              >
            </template>
          </el-table-column>

          <!-- <el-table-column prop="attachment" label="附件">
            <template #default="{ row }">
              <el-upload
                name="uploadFile"
                multiple
                :accept="acceptTypes"
                :action="uploadComUrl"
                :headers="uploadHeaders"
                :file-list="row.attachment"
                :on-preview="handlePreview"
              ></el-upload>
            </template>
          </el-table-column> -->
        </el-table>
      </div>
    <!-- </el-card> -->
  </div>
  <el-dialog
    title="实施过程记录"
    v-model="model.processVisible"
    destroy-on-close
    width="60vw"
  >
    <el-table
      :data="model.targetProcess.planProcessList"
      border
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column type="index" width="50" label="序号" />
      <el-table-column prop="comSituation" label="完成情况"></el-table-column>
      <el-table-column label="附件">
        <template #default="{ row }">
          <el-link
            v-for="(item, index) in row.processAttachmentArr"
            :key="index"
            @click="handlePreview(item)"
            >{{ item.fileName }}</el-link
          >
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="提交时间"></el-table-column>
      <el-table-column prop="createUserName" label="提交人"></el-table-column>
    </el-table>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRoute } from "vue-router";
import { getProjectInfo } from "/@/api/project";
// import { useUpload } from "/@/hooks";
const route = useRoute();
let tableData = ref([]);
const model = reactive({
  targetProcess: null,
  processVisible: false
});

const handlePreview = (item: any) => {
  if (item.response) {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item?.response.data.uuidFile}&fileName=${item?.response.data.fileName}`
    );
  } else {
    window.open(
      `${location.origin}${location.pathname}#/online?uuidFile=${item.uuidFile}&fileName=${item.fileName}`
    );
  }
};

let projectInfo = ref(null);
// const { uploadComUrl, acceptTypes, uploadHeaders } = useUpload();

// 获取项目详情
const initProjectInfo = async () => {
  try {
    const queryId = route.query?.id ?? "";
    const { code, data } = queryId && (await getProjectInfo({ id: queryId }));
    if (code === 200) {
      console.log(data, "data");
      projectInfo.value = data;

      tableData.value = data.projectPlans.map(el => {
        return {
          time: el.startTime.split(" ")[0] + "至" + el.endTime.split(" ")[0],
          timeObj: [el.startTime.split(" ")[0], el.endTime.split(" ")[0]],
          content: el.researchContent,
          goal: el.goal,
          isDone: el.done,
          doneDes: el.doneDes,
          doneTime: el.doneTime,
          attachment: (el.attachment && JSON.parse(el.attachment)) || []
        };
      });
      // isSaveStatus.value= projectInfo.value.
    }
  } catch (err) {
    console.log(err);
  }
};

const openProcess = item => {
  model.targetProcess = item;
  model.processVisible = true;
};

initProjectInfo();
</script>

<style lang="scss" scoped>
.empt-content {
  height: calc(100vh - 200px);
  width: 100%;
}

.card-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-box-header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .header-btn {
    font-size: 14px;
    cursor: pointer;
  }
}
</style>
